<template>
  <div id="box"
       style="width: 100%;height: 100%;"></div>
</template>

<script>
import {
  getSegmentationList
} from '@/api/dashboard/absentHistoryController'
import {
  lineOption
} from './chartsoption'

import { calculateDay } from "@/utils/dateutils"

let arrnum = [24]
for (let i = 1; i <= 24; i++) arrnum.push(i)
export default {
  name: "xgylinechart",
  props: ['date', 'isInSchool'],
  data () {
    return {
      mychart: "",
      x: [],
      y: [],
      locked: false,
      day: ''
    }
  },
  watch: {
    date: function () {
      this.changedata()
    }
  },
  methods: {
    async changedata () {

      if (!this.locked) {
        this.day = calculateDay(this.date)
        this.locked = !this.locked
        this.that_day = this.day
        let {
          msg: data
        } = await getSegmentationList(this.that_day, this.isInSchool)
        this.x = []
        this.y = []
        for (let i = this.that_day; i <= this.that_day + 23; i++) {
          var day1 = new Date();
          day1.setDate(day1.getDate() - i);
          var d1 = day1.getDate()
          this.x.push(d1)
          this.y.push(data[i - this.that_day].count)
        }
        lineOption.xAxis.data = this.x.reverse()
        lineOption.series[0].data = this.y.reverse()

        if (this.$store.state.isInSchool) lineOption.title.text = "全校不在校学生比列按时间分布折线图"
        else lineOption.title.text = "全校在校学生比列按时间分布折线图"
        var optionline = lineOption
        // 使用刚指定的配置项和数据显示图表。
        this.myChart.setOption(optionline);
        this.locked = !this.locked
      }

    }
  },
  async mounted () {


    this.myChart = this.$echarts.init(document.getElementById('box'));
    // 指定图表的配置项和数据
    this.changedata()
    setInterval(() => {
      this.myChart.resize();
    }, 100);
  },
  created () {

  },
}
</script>

<style scoped>
</style>
